<template>
  <div class="role-manage-view">
    <div class="role-manage-top">
      <el-button-group class="button-group">
        <el-button type="primary" @click="roleAdd">添加</el-button>
      </el-button-group>
      <div class="top-seach">
        <el-select v-model="clientsValue" placeholder="请选择应用" class="clients-select">
          <el-option
            v-for="item in clients"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>

        <el-input placeholder="请输入内容" v-model="roleSeach" class="input-with-select">
          <el-button slot="append" @click="findRole">查询</el-button>
        </el-input>
      </div>
    </div>
    <div class="role-manage-table">
      <el-table
        v-loading="isLoading"
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(21, 29, 54, 0.8)"
        ref="roleTable"
        :data="roletableData"
        height="100%"
        border
        highlight-current-row
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      >
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="index"
          label="序号"
          width="80"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="name"
          label="角色名"
        >
        </el-table-column>
        <!--<el-table-column-->
        <!--align="center"-->
        <!--:show-overflow-tooltip="true"-->
        <!--prop="path"-->
        <!--label="角色路径"-->
        <!--&gt;-->
        <!--</el-table-column>-->
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="clientname"
          label="应用"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="desciption"
          label="角色描述"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="levelname"
          label="角色等级"
        >
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="editRole(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="delRole(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="role-manage-paging">
      <el-pagination
        layout="total, sizes, prev, pager, next"
        background
        :page-size="pageSize"
        :total="total"
        :page-count="10"
        :page-sizes="[5, 10, 20, 40]"
        :current-page="currentPage"
        @current-change="changePage"
        @size-change="sizeChange"
      >
      </el-pagination>
    </div>
    <el-dialog title="添加角色" :visible="addRoledialog" width="30%" @close="addRoleClose" :close-on-click-modal="false">
      <el-form label-width="80px" status-icon :model="addRoleform" ref="addRoleform" :rules="addRolerules"
               class="demo-ruleForm">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="addRoleform.name" placeholder="角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色介绍">
          <el-input v-model="addRoleform.desciption" placeholder="角色介绍"></el-input>
        </el-form-item>
        <el-form-item label="选择应用" prop="clientId">
          <el-select v-model="addRoleform.clientId" placeholder="请选择活动区域" width="100%">
            <el-option v-for="(item,index) in appListSelect" :key="index" :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色等级" prop="level">
          <el-select v-model="addRoleform.level" placeholder="请选择活动区域" width="100%">
            <el-option v-for="(item,index) in levelListSelect" :key="index" :label="item.datacode"
                       :value="item.datavalue"></el-option>
          </el-select>
        </el-form-item>
        <!--<el-form-item label="root" prop="path">-->
        <!--<el-input placeholder="角色路径" v-model="addRoleform.path"></el-input>-->
        <!--</el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addRoleCancel">取消</el-button>
        <el-button type="warning" @click="addRoleKeep">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑角色" :visible="editRoledialog" width="30%" @close="editRoleClose" :close-on-click-modal="false">
      <el-form label-width="80px" status-icon :model="editRoleform" ref="editRoleform" :rules="addRolerules"
               class="demo-ruleForm">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="editRoleform.name" placeholder="角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色介绍">
          <el-input v-model="editRoleform.desciption" placeholder="角色介绍"></el-input>
        </el-form-item>
        <el-form-item label="选择应用" prop="clientId">
          <el-select v-model="editRoleform.clientId" placeholder="请选择活动区域" width="100%">
            <el-option v-for="(item,index) in appListSelect" :key="index" :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色等级" prop="level">
          <el-select v-model="editRoleform.level" placeholder="请选择活动区域" width="100%">
            <el-option v-for="(item,index) in levelListSelect" :key="index" :label="item.datacode"
                       :value="item.datavalue"></el-option>
          </el-select>
        </el-form-item>
        <!--<el-form-item label="root" prop="path">-->
        <!--<el-input placeholder="角色路径" v-model="editRoleform.path"></el-input>-->
        <!--</el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editRoleCancel">取消</el-button>
        <el-button type="warning" @click="editRoleKeep">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  export default {

    components: {
      // name
    },
    name: "roleManageView",
    props: {
      // 判断是否加载中
      isLoading: {
        type: Boolean,
        default: false
      },
      // 应用列表数据
      clients: {
        type: Array,
        default: []
      },
      // 角色列表数据
      roletableData: {
        type: Array,
        default: []
      },
      // 总条数
      total: {
        type: Number,
        default: 1
      },
      // 显示条数
      pageSize: {
        type: Number,
        default: 10
      },
      // 当前页
      currentPage: {
        type: Number,
        default: 1
      },
      // 添加角色弹窗状态
      addRoledialog: {
        type: Boolean,
        default: false
      },
      // 添加编辑角色表单
      addRoleform: {
        type: Object,
        default: {}
      },
      //应用列表
      appListSelect: {
        type: Array,
        default: []
      },
      // 编辑角色弹窗状态
      editRoledialog: {
        type: Boolean,
        default: false
      },
      editRoleform: {
        type: Object,
        default: {}
      },
      // 角色等级列表
      levelListSelect: {
        type: Array,
        default: []
      }
    },
    filters: {},
    computed: {},
    watch: {},
    data() {
      let nameRules = (rule, value, callback) => {
        let reg = /^[^\d.\-\[\]{}+=_;:'"<>?/\\，,。、‘’“”；：【】|——]/;
        // let reg = /^[^\d.\-\[\]{}+=_;:'"<>?/\\，,。、‘’“”；：【】|——]+\d$/;
        if (!value) {
          return callback(new Error('角色名不能为空'));
        } else if (!reg.test(value)) {
          return callback(new Error('角色名不能以特殊字符和数字开头'));
        } else {
          callback();
        }
      };

      return {
        clientsValue: "", // 选择应用
        roleSeach: "", // 搜索角色
        addRolerules: {
          name: [
            {required: true, validator: nameRules, trigger: 'blur'},
            {min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur'}
          ],
          clientId: [
            {required: true, message: '请选择应用', trigger: 'change'}
          ],
          // path: [
          //   {required: true, message: '请输入路径', trigger: 'blur'}
          // ],
          level: [
            {required: true, message: '请选择角色等级', trigger: 'change'}
          ]
        }
      }
    },
    created() {

    },
    mounted() {
      // this.$nextTick(() => {
      //   console.log("12312313", this.$refs);
      // })
    },
    methods: {
      // 角色查询
      findRole() {
        this.$emit('findRole', this.clientsValue, this.roleSeach);
      },
      // 改变页面
      changePage(page) {
        this.$emit('changePage', page);
      },
      // 每页条数改变
      sizeChange(num) {
        this.$emit('sizeChange', num);
      },
      // 添加角色
      roleAdd() {
        this.$emit('roleAdd');
      },
      // 关闭弹窗的回调
      addRoleClose() {
        this.$emit('addRoleClose');
      },
      // 取消添加角色
      addRoleCancel() {
        this.$emit('addRoleCancel');
      },
      // 保存添加角色
      addRoleKeep() {
        this.$emit('addRoleKeep');
      },
      // 编辑角色
      editRole(index, row) {
        this.$emit('editRole', index, row);
      },
      // 关闭编辑弹窗的回调
      editRoleClose() {
        this.$emit('editRoleClose');
      },
      // 取消编辑角色
      editRoleCancel() {
        this.$emit('editRoleCancel');
      },
      // 保存编辑角色
      editRoleKeep() {
        this.$emit('editRoleKeep');
      },
      // 删除角色
      delRole(index, row) {
        this.$emit('delRole', index, row);
      }
      // // 树自定义
      // renderContent(h, {node, data, store}) {
      //   // <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :highlight-current="true" :render-content="renderContent"></el-tree>
      //   // console.log("data",data);
      //   // return (
      //   //   <span>
      //   //   <i class="el-icon-service"></i>
      //   //   <span>{node.label}</span>
      //   //   </span>
      //   // );
      //   return (
      //     <span>
      //       <span>{node.label}</span>
      //     </span>
      //   );
      // }

    },
    destroyed() {

    }
  }
</script>

<style scoped lang="less">
  @import url("./roleManage");
</style>
